<template>
  <div class="schoolList" v-for="(data, index) in schoolListArr" :key="index">
    <div class="flex">
      <div class="schoolList-Left">
        <div v-if="data.isNewly">
          <h1 style="font-size: 24px">新增</h1>
        </div>
        <div v-else>
          <div class="df" style="align-items: baseline">
            <h1 style="font-size: 35px">{{ data.chance }}</h1>
            <span>%</span>
          </div>
          <div class="schoolList-Left-size">{{ data.probabilityExplain }}</div>
        </div>
        <div
          :class="
            data.chance_lv == 1
              ? 'chance1'
              : data.chance_lv == 2
                ? 'chance2'
                : 'chance3'
          "
          class="schoolList-Left-number"
        >
          {{ data.chance_lv == 1 ? '冲' : data.chance_lv == 2 ? '稳' : '保' }}
        </div>
      </div>
      <div class="schoolList-major curr" @click="handleMajor(data)">
        <div class="schoolList-major-name">{{ data.professionRealName }}</div>
        <div class="schoolList-major-size">{{ data.remarkExt }}</div>
        <div class="schoolList-major-num margintop">
          代码:
          {{ data.professionEnrollCode ? data.professionEnrollCode : '-' }}
          <span v-if="!!data.mseLevel"> | </span>
          <span v-if="!!data.mseLevel" class="mseLevel">{{
            data.mseLevel
          }}</span>
        </div>
      </div>
      <div class="schoolList-Center" style="flex: 1 1 0%">
        <div class="schoolName curr" @click="handleScoolNameClick(data)">
          {{ data.collegeRealName }}
        </div>
        <div class="schoolList-size" style="color: #333">
          {{ data.collegeRemark }}
        </div>
        <div class="schoolList-size">
          <p>
            代码: {{ data.collegeEnrollCode }} |
            {{ data.features.join(' / ') }} |
            {{
              data.provinceName +
              ' / ' +
              data.cityName +
              ' / ' +
              data.natureType +
              ' / ' +
              data.categories.join(' / ') +
              ' ' +
              (data.rank ? ' / 排名' + data.rank : '/ 排名 -')
            }}
          </p>
        </div>
      </div>
      <div class="schoolList-people" style="width: 128px">
        <div class="schoolList-Number">
          <span style="font-size: 35px"> {{ data.planNum }}</span
          ><span style="font-size: 12px">人</span>
        </div>
        <div class="schoolList-title">
          {{
            (data.learnYear ? data.learnYear : '-') +
            '年 ￥' +
            (data.cost ? data.cost : '-')
          }}
        </div>
        <div class="schoolList-title">
          {{ data.chooseSubjectText ? data.chooseSubjectText : '' }}
        </div>
      </div>
      <div class="schoolList-grade" style="width: 330px">
        <div class="schoolList-grade-left" style="width: 25%">
          <div class="schoolList-grade-size">录取人数</div>
          <div class="schoolList-grade-size">线差</div>
          <div class="schoolList-grade-size">最低分</div>
          <div class="schoolList-grade-size">最低位次</div>
          <div class="schoolList-grade-size schoolList-grade-size-icon">
            <span>等效位差</span>
            <el-tooltip placement="top">
              <template #content>
                什么是等效位差？
                <br />
                历年等效位差根据考生历年的等效位-历年位次的差值得出，
                <br />
                换算后的等效位差可更精准的与历年位次进行比较。
              </template>
              <QuestionFilled style="width: 12px; margin-left: 4px" />
            </el-tooltip>
          </div>
        </div>
        <div v-for="(moreItem, index) in data.moreYear" style="width: 25%">
          <div class="schoolList-grade-left">
            <div class="schoolList-grade-size-number alitem">
              {{ moreItem.enterNum }}
            </div>
            <div class="schoolList-grade-size-number alitem">
              {{ moreItem.lineDiff || '-' }}
            </div>
            <div class="schoolList-grade-size-number alitem">
              {{ moreItem.minScore }}
              <div
                v-if="
                  ((moreItem.zjText * 1 > 0 && moreItem.minScore * 1 > 0) ||
                    moreItem.zjText == '有征集') &&
                  moreItem.minScore !== '-'
                "
                style="background-color: #fbc7c2; color: red"
              >
                征
              </div>
            </div>
            <div class="schoolList-grade-size-number alitem">
              {{ moreItem.minRank }}
            </div>
            <div class="schoolList-grade-size-number alitem">
              <span
                v-if="
                  moreItem.equivalentBitDifference == '-' ||
                  !moreItem.equivalentBitDifference
                "
              >
                -
              </span>
              <span
                v-else-if="moreItem.equivalentBitDifference < 0"
                style="color: #ff7d00"
              >
                低{{
                  moreItem.equivalentBitDifference.toString().substring(1)
                }}</span
              >
              <span
                v-else-if="moreItem.equivalentBitDifference >= 0"
                style="color: #00b56a"
              >
                高{{ moreItem.equivalentBitDifference }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          style="width: 180px; padding: 40px; cursor: pointer"
          class="center alitem"
        >
          <div
            :style="{
              color: data.isFit == 0 ? '#ccc !important' : '',
              border: data.isFit == 0 ? '1px solid #ccc !important' : '',
            }"
            class="schoolList-look-button alitem"
            :class="getFilledCollegeIndex(data) >= 0 ? 'select' : ''"
            @click="onClickTianbao(data)"
          >
            {{
              getFilledCollegeIndex(data) >= 0
                ? '已填' + (getFilledCollegeIndex(data) + 1)
                : '填报'
            }}
          </div>
        </div>
        <div
          style="text-align: center; font-size: 12px; color: red"
          v-if="data.isFit == 0"
        >
          选科不符
        </div>
      </div>
    </div>
  </div>
  <Drawertool ref="drawertoolRef" />
</template>
<script setup>
import volunteersStore from '@/store/modules/volunteerInfos';
import Drawertool from '@/components/Drawertool';
import bus from '@/utils/bus.js';
import { searchMajor } from '@/api/appv2/appv1.js';

import { ElMessage } from 'element-plus';
const drawertoolRef = ref(null);
const volunteerStore = volunteersStore();

const props = defineProps({
  // 院校列表数据
  schoolListArr: {
    type: Array,
    default: [],
  },
  // 可填写志愿表数量
  volunteerNumber: {
    type: Number,
    default: 0,
  },
  // 每张志愿表可填报专业数
  zy_num_group: {
    type: Number,
    default: 0,
  },
  batchs: {
    type: Array,
    default: [],
  },
  studentData: {
    type: Object,
    default: {},
  },
});

const majorLeavel = ref('');
const fetcSearchMajor = (major) => {
  let data = {
    search: major.professionRealName,
    code: major.majorCode,
  };
  searchMajor(data).then((res) => {
    if (res.code == 20000) {
      majorLeavel.value = res.data[0].level;
      major.level = majorLeavel.value - 1;

      localStorage.setItem('student_id', props.studentData.studentId);
      drawertoolRef.value.handleChangeDrawer(true, '3-1');
      nextTick(() => {
        bus.emit('handleOpenMajorDet', major);
      });
    }
  });
};

const handleScoolNameClick = (data) => {
  localStorage.setItem('provinceId', props.studentData.gkaProvinceNumId);
  localStorage.setItem('student_id', props.studentData.studentId);
  drawertoolRef.value.handleChangeDrawer(true, '3', data);
};

// 大学下面的专业名称点击
const handleMajor = (major) => {
  fetcSearchMajor(major);
};
// 当前填报志愿表数据
const volunteerInfos = ref(
  computed(() =>
    volunteerStore.volunteerInfos.length ? volunteerStore.volunteerInfos : []
  )
);

// 是否已填志愿表并返回填报的志愿表下标
function getFilledCollegeIndex(data) {
  return volunteerInfos.value.findIndex((item) => item.id == data.id);
}

// 点击填报按钮 data:学校数据  major:专业数据
function onClickTianbao(data) {
  if (data.isFit == 1) {
    const volunteerInfo = volunteerInfos.value;
    // 两种情况  用户点了志愿表  用户没有填志愿表
    if (volunteerInfo?.length == props.volunteerNumber) {
      ElMessage({
        message: `当前所选专业已达上限（${props.volunteerNumber}）`,
        type: 'warning',
      });
      return;
    }

    const index = getFilledCollegeIndex(data);

    if (index > -1) {
      volunteerInfo.splice(index, 1);
    } else {
      volunteerInfo.push(data);
    }

    volunteerInfos.value = volunteerInfo;
    volunteerStore.setVolunteerInfos(JSON.parse(JSON.stringify(volunteerInfo)));
  } else {
    return;
  }
}
</script>
<style lang="scss" scoped>
.schoolList {
  display: flex;
  flex-direction: column;
  border-right: none;
  background: #fff;
  position: relative;
  border-bottom: 1px solid #e5e6eb;

  .schoolList-look-button {
    color: #165dff;
    width: 90px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #165dff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }

  .schoolList-look-button.select {
    color: white;
    background-color: #165dff;
  }

  .schoolList-grade {
    display: flex;

    .schoolList-grade-left {
      display: flex;
      flex-direction: column;
      height: 100%;

      .schoolList-grade-size {
        height: 25%;
        padding: 10px 5px;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        border-bottom: 1px solid #f2f3f5;
        border-right: 1px solid #f2f3f5;
      }

      .schoolList-grade-size-number {
        height: 20%;
        padding: 10px 5px;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        border-bottom: 1px solid #f2f3f5;
        border-right: 1px solid #f2f3f5;
        padding-left: 10px;
      }

      .schoolList-grade-size-icon {
        align-items: center;
        display: flex;
        flex-direction: row;
      }
    }
  }

  .schoolList-people {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 18px 0;
    border-right: 1px solid #e5e6eb;

    .schoolList-Number {
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      color: #1d2129;
      line-height: 24px;
    }

    .schoolList-title {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 1.5;
    }
  }

  .schoolList-major {
    width: 300px;
    padding: 14px;
    border-right: 1px solid #e5e6eb;

    .schoolList-major-name {
      font-size: 14px;
      font-weight: 500;
      color: #1d2129;
      line-height: 14px;
    }

    .schoolList-major-size {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 400;
      color: #4e5969;
      line-height: 24px;
    }

    .schoolList-major-num {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 18px;

      .mseLevel {
        background-color: #fbe6e8;
        padding: 2px 4px;
        font-size: 10px;
        color: #f54f4a;
      }
    }
  }

  .schoolList-Center {
    min-width: 100px;
    margin-bottom: 10px;

    .schoolName {
      font-size: 18px;
      font-weight: 500;
      color: #1d2129;
      line-height: 27px;
      margin-left: 20px;
      margin-top: 20px;
    }

    .schoolName-size {
      font-size: 14px;
      font-weight: 400;
      color: #1d212c;
      line-height: 27px;
      margin-left: 20px;
      margin-top: 20px;
    }

    .schoolList-size {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 24px;
      display: flex;
      margin-left: 20px;
      align-items: center;
    }

    .schoolList-bottom {
      display: flex;
      margin-left: 20px;
      margin-top: 10px;
      margin-bottom: 10px;

      .schoolList-bottom-size {
        background: #fff;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #bcc3cc;
        font-size: 12px;
        font-weight: 400;
        color: #86909c;
        padding: 0 4px;
        margin: 0 4px;
      }
    }
  }

  .schoolList-Left {
    width: 115px;
    padding-left: 40px;
    padding-top: 18px;
    padding-bottom: 18px;
    border-right: 1px solid #f2f3f5;

    .schoolList-Left-size {
      text-align: left;
      font-size: 12px;
      font-family:
        PingFang SC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #86909c;
      line-height: 12px;
    }

    .schoolList-Left-number {
      width: 20px;
      height: 20px;
      // background-color: #F53F3F;
      text-align: center;
      line-height: 20px;
      border-radius: 4px;
      color: #fff;
    }
  }
}

.chance1 {
  background-color: #f53f3f;
}

.chance2 {
  background-color: #ff8c33;
}

.chance3 {
  background-color: #00bf10;
}
</style>
